<template>
  <div class="rankList" ref="rank">
    <scroll class="toplist" :data="topList" ref="toplist">
      <ul>
        <li class="item" v-for="items in topList" :key="items.id" @click="selectItem(items)">
          <div class="icom">
            <img width="100" height="100" v-lazy="items.picUrl" />
          </div>
          <ul class="songlist">
            <li class="song" v-for="(item,index) in items.songList" :key="index">
              <span>{{index+1}}</span>
              <span>{{item.songname}}-{{item.singername}}</span>
            </li>
          </ul>
        </li>
      </ul>
      <div class="loading-container" v-show="!topList.length">
        <loading></loading>
      </div>
    </scroll>
    <router-view></router-view>
  </div>
</template>

<script>
  import {
    getRankFn
  } from 'api/rank';
  import Scroll from 'base/scroll/scroll';
  import Loading from 'base/loading/loading';
  import {playlistMixin} from 'common/js/mixin';
  import {mapMutations} from 'vuex';

  export default {
    name: 'Rank',
    mixins:[playlistMixin],
    data() {
      return {
        topList: []
      }
    },
    methods: {
      getData() {
        getRankFn().then((res) => {
          this.topList = res.data.topList
        })
      },
      handlePlayList(playList){
        const bottom = playList.length > 0 ? '60px' : ''
        this.$refs.rank.style.bottom = bottom
        this.$refs.toplist.refresh()
      },
      selectItem(item){
        this.$router.push({
          path: `/rank/${item.id}`
        })
        this.setTopList(item)
      },
      ...mapMutations({
        setTopList:'SET_TOP_LIST'
      })
    },
    components: {
      Scroll,
      Loading
    },
    mounted() {
      this.getData()
    },
  }

</script>
